<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="shortcut icon" type="image/x-icon" href="https://unpkg.byted-static.com/latest/byted/arco-config/assets/favicon.ico">
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              primary: '#165DFF',
              secondary: '#FF7D00',
              dark: '#1D2939',
              light: '#F9FAFB',
              neutral: '#667085'
            },
            fontFamily: {
              inter: ['Inter', 'system-ui', 'sans-serif'],
            },
          },
        }
      }
    </script>
    <style type="text/tailwindcss">
      @layer utilities {
        .content-auto {
          content-visibility: auto;
        }
        .text-shadow {
          text-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .transition-custom {
          transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .scrollbar-hide::-webkit-scrollbar {
          display: none;
        }
        .scrollbar-hide {
          -ms-overflow-style: none;
          scrollbar-width: none;
        }
      }
    </style>
    <title>初练音乐</title>
  </head>
  <body>
    <div id="app" class="font-inter bg-gray-50 text-dark antialiased"></div>
    <script type="module" src="/src/main.ts"></script>
    <script src="/js/alphTab.js"></script>
  </body>
</html>
